<template>
  <ele-card :body-style="{ paddingBottom: '2px' }">
    <SearchForm
      v-model:search-items="searchItems"
      :form-config="formConfig"
      :cache-key="cacheKey"
      @search="handleSearch"
    />
  </ele-card>
</template>

<script setup>
import { ref } from "vue";
import SearchForm from "@/components/CommonSearch/SearchForm.vue";
// 定义接收的props
const _props = defineProps({
  cacheKey: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(["search"]);

// 定义搜索项配置
const searchItems = ref([
  {
    label: "用户账号",
    prop: "username",
    component: "el-input",
    visible: true,
    span: { lg: 6, md: 12, sm: 12, xs: 24 },
    props: {
      clearable: true,
      placeholder: "请输入用户账号",
    },
  },
  {
    label: "用户名",
    prop: "nickname",
    component: "el-input",
    visible: true,
    span: { lg: 6, md: 12, sm: 12, xs: 24 },
    props: {
      clearable: true,
      placeholder: "请输入用户名",
    },
  },
  {
    label: "登录时间",
    prop: "dateRange",
    component: "el-date-picker",
    visible: true,
    span: { lg: 6, md: 12, sm: 12, xs: 24 },
    props: {
      unlinkPanels: true,
      type: "daterange",
      rangeSeparator: "-",
      valueFormat: "YYYY-MM-DD",
      startPlaceholder: "开始日期",
      endPlaceholder: "结束日期",
      class: "ele-fluid",
    },
  },
]);

/** 表单配置 */
const formConfig = ref({
  username: "",
  nickname: "",
  dateRange: ["", ""],
});

/** 处理搜索 */
const handleSearch = (formData) => {
  const [d1, d2] = formData.dateRange || [];
  emit("search", {
    ...formData,
    createTimeStart: d1 ? `${d1} 00:00:00` : "",
    createTimeEnd: d2 ? `${d2} 23:59:59` : "",
    dateRange: undefined,
  });
};
</script>
